<template>
  <div class="box" v-if="filmList">
    <!-- 电影轮播图 -->
    <div class="schedule_wrap">
      <div class="film_bg" :style="{background:'url('+nowFilm.poster+')'}" v-if='nowFilm'></div>
      <div class="film_list">
        <cinema-swiper v-if="filmList.length">
          <cinema-swiper-item v-for="data in filmList" :key="data.filmId">
            <div class="film_item">
              <div class="film_warp">
                <img :src="data.poster" alt="" />
              </div>
            </div>
          </cinema-swiper-item>
        </cinema-swiper>
      </div>
      <div class="icon"><i class="iconfont icon-shangjiantou"></i></div>
    </div>
    <div v-if="nowFilm">
      <div class="film_info" @click="goFilm(nowFilm.filmId)">
        <div class="film_head">
          <span>{{ nowFilm.name }}</span>
          <span>{{ nowFilm.grade }}<span>分</span></span>
        </div>
        <div class="film_desc">
          <span>{{ nowFilm.category }}</span>
          |
          <span>{{ nowFilm.runtime }}分钟</span>
          |
          <span>{{ nowFilm.director }}</span>
          |
          <span v-for="(data,index) in nowFilm.actors" :key="index">{{
            data.name
          }}</span>
        </div>
        <i class="iconfont icon-jiantou_liebiaoxiangyou_o"></i>
      </div>
      <van-tabs title-active-color="orange"  lazy-render color='orange' v-model="dataIndex.old"  @click="onClick">
        <van-tab
          v-for="(data,index) in nowFilm.showDate"
          :title="data | dataFilter"
          :name='index'
          :key="data"
        >
          <div class="schedule_List">
            <div
              class="schedule_item"
              v-for="data in schedulesList"
              :key="data.scheduleId"
            >
              <div class="left" >
                <div class='start_at'>{{ data.showAt | showAtFilter }}</div>
                <div class='end_at'>{{ data.endAt | endAtFilter }}</div>
              </div>
              <div class="middle">
                  <div class="language">{{data.filmLanguage}}{{data.imagery}}</div>
                  <div class="hall">{{data.hallName}}</div>
              </div>
              <div class="right">
                  <div class="buy_ticket">购票</div>
                  <div class="lowest_price">￥{{data.salePrice/100}}</div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import cinemaSwiper from '@/components/cinema/CinemaSwiper'
import cinemaSwiperItem from '@/components/cinema/CinemaSwiperItem'
// 引入http
import http from '@/util/http'
import { mapState, mapMutations } from 'vuex'
import moment from 'moment'
import Vue from 'vue'
moment.locale('zh-cn')
// 放映日期
Vue.filter('dataFilter', data => {
  return (
    moment(data * 1000)
      .calendar()
      .substring(0, 2) + moment(data * 1000).format('MMMDo')
  )
})
// 当前选中日期座次开始时间
Vue.filter('showAtFilter', data => {
  return moment(data * 1000).format('LT')
})
// 当前选中日期座次结束时间
Vue.filter('endAtFilter', data => {
  return moment(data * 1000).format('LT') + '散场'
})
export default {
  data () {
    return {
      nowFilm: null
    }
  },
  components: {
    cinemaSwiper,
    cinemaSwiperItem
  },
  computed: {
    ...mapState(['filmList', 'schedulesList', 'dataIndex'])
  },
  methods: {
    ...mapMutations(['changeFilmList', 'changeSchedulesList', 'clearSchedulesList', 'changeDataIndex']),
    onClick () {
      this.changeDataIndex(this.dataIndex.old)
      this.$router.push(`/cinema/${this.$route.params.cinemaId}/film/${this.nowFilm.filmId}/${this.nowFilm.showDate[this.dataIndex.index]}`)
      http({
        url: `/gateway/?filmId=${this.nowFilm.filmId}&cinemaId=${this.$route.params.cinemaId}&date=${this.nowFilm.showDate[this.dataIndex.index]}&k=2818252`,
        headers: {
          'X-Host': 'mall.film-ticket.schedule.list'
        }
      }).then((res) => {
        this.clearSchedulesList()
        this.changeSchedulesList(res.data.data.schedules)
      })
    },
    goFilm (id) {
      this.$router.push(`/detail/${id}`)
    }
  },
  mounted () {
    http({
      url: `/gateway/?cinemaId=${this.$route.params.cinemaId}&k=5631682`,
      headers: {
        'X-Host': 'mall.film-ticket.film.cinema-show-film'
      }
    }).then((res) => {
      this.changeFilmList(res.data.data.films)
      this.nowFilm = this.filmList[0]
      http({
        url: `/gateway/?filmId=${this.nowFilm.filmId}&cinemaId=${this.$route.params.cinemaId}&date=${this.nowFilm.showDate[0]}&k=5817098`,
        headers: {
          'X-Host': 'mall.film-ticket.schedule.list'
        }
      }).then((res) => {
        this.changeSchedulesList(res.data.data.schedules)
      })
      this.$watch(
        () => this.$route.params,
        (to) => {
          this.nowFilm = this.filmList.filter(
            (item) => item.filmId === Number(to.filmId)
          )[0]
        }
      )
    })
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .schedule_wrap {
    height: 130px;
    padding: 15px 0;
    position: relative;
    background: radial-gradient(black, gray);
    overflow: hidden;
    // 电影轮播的大背景
    .film_bg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
      filter:blur(20px);
    }
    // 电影轮播
    .film_list {
      position: relative;
      z-index: 1;
      .swiper-slide {
        height: 130px;
        // width: 90px;
        transition: 0.7s;
        transform: scale(0.8);
        transform-origin: bottom;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        .film_item {
          height: 130px;
          width: 90px;
          .film_warp {
            height: 100%;
            width: 100%;
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .swiper-slide-active,
      .swiper-slide-duplicate-active {
        transform-origin: bottom;
        transform: scale(1);
      }
    }
    .icon {
      width: 100%;
      height: 15px;
      position: absolute;
      bottom: 0;
      left: 0;
      i {
        font-size: 21px;
        color: white;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .film_info {
    padding: 15px 0;
    position: relative;
    border-bottom: 1px solid rgba(128, 128, 128, 0.05);
    .film_head {
      font-size: 15px;
      text-align: center;
      margin-bottom: 10px;
      > span {
        padding-right: 5px;
      }
      > span:last-child {
        font-size: 16px;
        color: #ffb232;
        font-style: italic;
        span {
          font-size: 10px;
        }
      }
    }
    .film_desc {
      font-size: 13px;
      color: gray;
      text-align: center;
      padding: 0 45px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    i {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
    }
  }
  .schedule_List{
      .schedule_item{
          padding:15px;
          overflow: hidden;
          .left{
              float: left;
              width: 84px;
              .start_at{
                  font-size: 15px;
                  color:#191a1b;
              }
              .end_at{
                font-size: 13px;
                color: #797d82;
                margin-top: 2px;
              }
          }
          .middle{
              width: 37%;
              float: left;
              overflow: hidden;
              .language{
                font-size: 15px;
                color:#191a1b;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .hall{
                font-size: 13px;
                color: #797d82;
                margin-top: 2px;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
          }
          .right{
            float: right;
            padding:5.5px 0;
            div{
                color:#ff5f16;
                float: right;
            }
            .buy_ticket{
                width: 50px;
                height: 25px;
                border:1px solid #ff601691;
                border-radius: 2px;
                text-align: center;
                font-size: 13px;
                line-height: 25px;
            }
            .lowest_price{
                height: 25px;
                line-height: 25px;
                padding-right:20px;
                font-size: 15px;
            }
          }
      }
  }
}
</style>
